<template>
  <vxe-modal v-model="dialogVisible" title="编辑" resize show-footer show-zoom :width="isMobile?'100%':'60%'" :fullscreen="isMobile">
    <el-form
      ref="form"
      :model="modelValue"
      :rules="rules"
      label-width="90px"
      label-position="right"
    >
      <el-form-item prop="roleIds" label="角色">
        <el-select v-model="modelValue.roleIds" clearable filterable multiple>
          <el-option v-for="(item,idx) in roleList" :key="idx" :value="item.id" :label="item.roleName" />
        </el-select>
      </el-form-item>
      <el-form-item prop="depId" label="部门">
        <UpmsDepCascader v-model="modelValue.depId" />
      </el-form-item>
      <el-form-item prop="mobile" label="手机号">
        <el-input v-model.trim="modelValue.mobile" clearable maxlength="11" show-word-limit />
      </el-form-item>
      <el-form-item prop="realname" label="姓名">
        <el-input v-model.trim="modelValue.realname" clearable maxlength="30" />
      </el-form-item>
      <el-form-item prop="email" label="邮箱">
        <el-input v-model.trim="modelValue.email" clearable />
      </el-form-item>
      <el-form-item prop="userImage" label="头像">
        <ftp v-model="modelValue.userImage" dir="upms/user" :file-name="modelValue.mobile" />
      </el-form-item>
      <el-form-item prop="enable" label="是否可用">
        <el-select v-model="modelValue.enable">
          <el-option value="ENABLE" label="是" />
          <el-option value="DISABLE" label="否" />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <vxe-button status="primary" content="提交" :disabled="loading" @click="clickSubmitBtn" />
    </template>
  </vxe-modal>
</template>

<script>
import Api from '@/api/upms/user'
import Ftp from '@/components/Upload/Ftp'
import UpmsRoleApi from '@/api/upms/role'
import { VxeModalMixin } from '@/mixins/vxe/VxeModalMixin'
import { validMobile } from '@/utils/validate'
export default {
  name: 'UpmsUserCreateDTO',
  components: { Ftp },
  mixins: [VxeModalMixin],
  data() {
    return {
      api: Api.update,
      roleList: [],
      modelValue: {
        id: undefined,
        mobile: undefined,
        realname: undefined,
        roleIds: [],
        depId: undefined,
        enable: undefined,
        userImage: undefined
      },
      rules: {
        mobile: [
          { required: true },
          {
            validator: (rule, value, callback) => {
              if (validMobile(value)) {
                callback()
              } else {
                callback(new Error('手机号格式错误'))
              }
            }
          }
        ],
        depId: [
          { required: true }
        ],
        password: [
          { required: true }
        ],
        roleIds: [
          { required: true }
        ],
        realname: [
          { required: true }
        ],
        enable: [
          { required: true }
        ]
      }
    }
  },
  computed: {

  },
  mounted() {
    this.getRoleList()
  },
  methods: {
    getRoleList() {
      UpmsRoleApi.page({}).then(({ data }) => {
        this.roleList = data
      })
    }

  }
}
</script>

<style>

</style>
